<template>
  <el-table
    :data="leftData"
    style="border: 1px solid #c0e9fb"
    empty-text="暂无数据"
    :cell-style="cellStyle"
    :header-cell-style="{ background: '#d1e7ff' }"
    border
  >
    <el-table-column prop="unitName" label="地区" height="50" align="center" />
    <el-table-column prop="score" label="政治生态排名（总分）" align="center" />
  </el-table>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps(['areaData'])

const leftData: any = ref([])
const tableLoading = ref(false)

watch(
  () => props.areaData,
  () => {
    leftData.value = props.areaData
  },
  { deep: true }
)

const cellStyle = () => {
  return {
    borderTop: '1px solid #c0e9fb',
    borderBottom: '1px solid #c0e9fb'
  }
}
defineOptions({
  name: 'LPage'
})
</script>

<style scoped></style>
